
"use strict";
document.write("<script type='text/javascript' src='./js/720/three.min.js'></script>");
document.write("<script type='text/javascript' src='./js/720/StereoEffect.js'></script>");
document.write("<script type='text/javascript' src='./js/720/DeviceOrientationControls.js'></script>");
document.write("<script type='text/javascript' src='./js/720/OrbitControls.js'></script>");
document.write("<script type='text/javascript' src='./js/720/Tween.js'></script>");
document.write("<script type='text/javascript' src='./js/720/jquery.min.js'></script>");
document.write("<script type='text/javascript' src='./js/720/SceneManager.js'></script>");
document.write("<script type='text/javascript' src='./js/720/reticle.js'></script>");
// document.write("<script type='text/javascript' src='https://cdn.bootcss.com/stats.js/r16/Stats.min.js'></script>");


var Player720Manager = function (container,canvas){

    this.prop = {

        sceneManager:null,
        scene:null,
        camera:null, 
        renderer:null,
        renderElement:null,
        stereoEffect:null,
        orbitControls:null,
        orientationControls:null,
        texture:null,
        clock:null,
    
        fov :75,//拍摄距离  视野角值越大，场景中的物体越小
        near :0.1,//最小范围
        far :2000,//最大范围
        fovMin :20,
        fovMax :168,
        debugStats:null,
    
        isStereoEnable:false,
        isGyroscopeEnable:false,
        isFullscreenEnabel:false,
    
        videoIndex:0,
    
        // 设置渲染频率为30FBS，也就是每秒调用渲染器render方法大约30次
        FPS: 30,
        // 声明一个变量表示render()函数被多次调用累积时间
        // 如果执行一次renderer.render，timeS重新置0
        timeS :0,
    
        editMode:true,
    
        hotspotImgPath:null,
    
        reticle:null,
      };

      this.canvas = canvas;
      this.container = container;

      this.init();

}



 
//   var canvas = document.createElement( 'canvas' );
//   canvas.width = 512*3;
//   canvas.height = 256*3;
//   const container = document.getElementById('webglviewer');

  
//   // 标记点集合对象
//     var marking = null;
//     // 标记位置对象 
//   var markingPos = {"selectedIndex":-1,"marking":[
//   {"id":1,"barName":"america","color":"black","value":20.51,"pos":{longitude:-77.02182,latitude:38.53707},"time":0,"finish":false,"event":{showTime:0,hideTime:0,toTime:0}},
//   {"id":2,"barName":"china","color":"grey","value":13.2,"pos":{longitude: 3.515662, latitude: -0.037059},"time":0,"finish":false,"event":{showTime:0,hideTime:0,toTime:0}},
//   {"id":3,"barName":"japan","color":"white","value":5.06,"pos":{longitude:139.6932,latitude:35.6898},"time":0,"finish":false,"event":{showTime:0,hideTime:0,toTime:0}}]};
//   var clickObjects = [];
//   // 地球大小
//   var earthBallSize = 500;
//   // 标记对象集合变量
//   var markingGroup = null;
//   var liveurl = "http://play.memego.com/game/a7353cd57c5b479cb2392d747286be400.flv";
//   var url = "http://vod.memego.com/95d625c0vodcq1253125461/859bfc095285890803432390870/lJmV9chqrLwA.flv";
  
  
//   var hotspot = new Hotspot(markingPos);
//   var transform = new Transform();
//   var controlEvents = new ControlEvents(this.prop,markingPos,(event)=>{
//     this.addMarkerAt(event);
//   },(event)=>{
//     if(this.prop.editMode) {
//       this.moveMarkerTo(event);
//     }
//   },(event)=>{
//     this.jumpTo(event);
//   });
//   var toolbar = new ToolBar(this.prop);


//   function hotspotDelete() {
//     if (hotspot) {
//       hotspot.hotspotDelete((index)=>{
//         clickObjects.splice(index, 1);
//         markingGroup.remove(markingGroup.children[index]);
//       });
//     }
//   }

  
  //{"barName":"geymany","color":"blue","value":3.93,"pos":[13.25,52.3]},{"barName":"france","color":"silver","value":2.76,"pos":[2.174203,48.522552]},{"barName":"england","color":"red","value":2.66,"pos":[0.5,51.3]},{"barName":"india","color":"green","value":2.65,"pos":[77.13,28.37]},{"barName":"brazil","color":"orange","value":2.2,"pos":[-47.56,-15.47]},{"barName":"italy","color":"bronze","value":2.05,"pos":[12,42]},{"barName":"canada","color":"yellow","value":1.76,"pos":[-75.43,45.25]}
  
  // 图片加载器
//   var textureLoader = new THREE.TextureLoader();

//   $("ul#hots").on("click","li",function(){ 
//     var a = $(this).children("a");
    
//     var id = new Number($('#hotspotId').html());
//     var index = hotspot.getItemIndex(id);
//     var marking =  markingPos.marking[index];
//     marking.barName = a.text();
//     // alert(a.text());//img[0].getAttribute("src")
//     var mesh = clickObjects[index];
//     var textture = textureLoader.load("./image/" + marking.barName + ".jpg");
//     console.log(mesh.material);
//     mesh.material.map = textture;

//     $('#nameInput').val(marking.barName);
//   });

  

//   function addMarker(marking) {
    
//           var pos = transform.sphericalCoordsToVector3(marking.pos.longitude, marking.pos.latitude, earthBallSize * 0.9);
//         var _pos = transform.sphericalCoordsToVector3(marking.pos.longitude, marking.pos.latitude, earthBallSize * 0.9 + marking.value);
//         var curve = new THREE.CubicBezierCurve3(pos, pos, _pos, _pos);
//         var points = curve.getPoints(100);
//         var aGroup = new THREE.Group();

//     // var geometry = new THREE.SphereBufferGeometry(10, 50, 50);
//     // var geometry = new THREE.CircleBufferGeometry(5, 32);
//     // var geometry = new THREE.BoxBufferGeometry(6, 30, 10);
//     var geometry = new THREE.PlaneGeometry(25, 15);
//         geometry.scale(2, 2, 2);
//         var texture = textureLoader.load("./image/" + marking.barName + ".jpg");
//         var material = new THREE.MeshBasicMaterial({ map: texture });
//         let mesh = new THREE.Mesh(geometry, material);
//           mesh.position.set(points[0].x, points[0].y, points[0].z);
//     mesh.lookAt(this.prop.camera.position);
//     mesh.name = marking.id;
//     mesh.material.transparent = true;
//           aGroup.add(mesh);
//           clickObjects.push(mesh);
//     markingGroup.add(aGroup);
    


//     //
//         this.prop.reticle.gazer.on(mesh,'gazeEnter',() => {
//             marking.time = 0;
//             marking.finish = false;
//                   this.prop.reticle.resetLoadingPercent();
//         });
//     this.prop.reticle.gazer.on(mesh,'gazeLeave',() => {
//         marking.time = 0;
//           marking.finish = false;
//               this.prop.reticle.resetLoadingPercent();
//     });
//     this.prop.reticle.gazer.on(mesh,'gazeTrigger',(delta) => {
//           if(marking.finish) return;

//           marking.time += delta;
//         this.prop.reticle.setLoadingPercent(marking.time);

//         if(marking.time > 1) {
//             marking.time = 0;
//             marking.finish = true;

//           if(this.prop.editMode) {
//             hotspot.itemSelected(marking,(id)=>{
//               this.selectMarker(id);
//             });
//           }
//           else {
//             //TODO: 热点跳转 切换视频
//             // this.switchVideo((this.prop.videoIndex ===0?1:0));
//           }
//         }
//     });
//     }

//   function updateMarker(sphericalCoords) {
//     if(markingPos.selectedIndex < 0) return;

//     var marking = markingPos.marking[markingPos.selectedIndex];
//     marking.pos.longitude = sphericalCoords.longitude;
//     marking.pos.latitude = sphericalCoords.latitude;

//     var pos = transform.sphericalCoordsToVector3(marking.pos.longitude, marking.pos.latitude, earthBallSize * 0.9);
//     var _pos = transform.sphericalCoordsToVector3(marking.pos.longitude, marking.pos.latitude, earthBallSize * 0.9 + marking.value);
//     var curve = new THREE.CubicBezierCurve3(pos, pos, _pos, _pos);
//     var points = curve.getPoints(100);
//     clickObjects[markingPos.selectedIndex].position.set(points[0].x, points[0].y, points[0].z);
//     clickObjects[markingPos.selectedIndex].lookAt(this.prop.camera.position);
//   }

  

//   function selectMarker(id) {
//       markingGroup.children.forEach((item)=>{
//         if(item.children[0].name == id) {
//           item.children[0].material.opacity = 1;
//         }
//         else {
//           item.children[0].material.opacity = 0.2;
//         }
//       })
//   }

Player720Manager.prototype = {
    init :function() {

        var _sceneManager = new SceneManager(this.prop,this.container,this.canvas);
        this.prop.sceneManager = _sceneManager;
        
        
    
        var _reticle = new Reticle();
        this.prop.reticle = _reticle;
    
        // this.createMarkersGroup();
        // controlEvents.attachControlEvents(container);
      }
}

   
   

//   function toggleView() {
//     this.toolbar.toggleView();
//   }

//   function toggleVR() {
//     this.toolbar.toggleVR(this.prop.reticle);
//   }

//    /* 控制陀螺仪 */
//   function toggleGyro(event) {
//      this.toolbar.toggleGyro(event);
//   }

//   function toggleViewMode() {
//     this.toolbar.toggleViewMode();
//   }

//   function toggleFullscreen() {
//     this.toolbar.toggleFullscreen();
//   }

//   function createMarkersGroup() {
//     // 球体表面标记
//     markingGroup = new THREE.Group();
//       markingPos.marking.forEach(function (item, index) {
//       this.addMarker(item);
//     });
//     this.prop.scene.add(markingGroup);
//   }

//   window.onresize = function() {

//     console.log('window resize');
//     this.prop.camera.aspect = container.clientWidth / container.clientHeight;
//     this.prop.camera.updateProjectionMatrix();
//     this.prop.renderer.setSize(container.clientWidth, container.clientHeight);

//     this.prop.reticle.setLoadingEffect(this.prop.isStereoEnable,this.prop.renderer);
//   }

  
//   function jumpTo(e) {
//     var clientX,clientY;
    
//     var pointPos = transform.vrModeClientCoords(e,this.prop.isStereoEnable)
//     clientX = pointPos.clientX;
//     clientY = pointPos.clientY;

//     //TRANSFORM THESE COORDS ON SCREEN INTO THREE.JS COORDS
//     var mouse = new THREE.Vector2();
//     mouse.x = (clientX / window.innerWidth) * 2 - 1;
//     mouse.y = -(clientY / window.innerHeight) * 2 + 1;

//     var raycaster = new THREE.Raycaster();
//     //USE RAYCASTER
//     raycaster.setFromCamera(mouse, this.prop.camera);

//     var intersects = raycaster.intersectObjects(clickObjects);
//     if(intersects != null && intersects.length > 0) {
//       intersects.forEach((item)=>{
//         if(this.prop.editMode) {
//           this.markingPos.selectedIndex = hotspot.getItemIndex(item.object.name);
//           hotspot.itemSelected(hotspot.getItemData(item.object.name),(id)=>{
//             this.selectMarker(id);
//           });
//         }
//         else {
//           //TODO: 热点跳转 切换视频
//           // this.switchVideo((this.prop.videoIndex ===0?1:0));
//         }
//       });
//     }
//     else {
//       hotspot.hideHotspotDetail(()=>{
        
//         markingGroup.children.forEach((item)=>{
//           item.children[0].material.opacity = 1;
//         })
//       });
//     }
//   }
//   function addMarkerAt(e) {
//     var clientX,clientY;
    
//     var pointPos = transform.vrModeClientCoords(e,this.prop.isStereoEnable)
//     clientX = pointPos.clientX;
//     clientY = pointPos.clientY;

//     //TRANSFORM THESE COORDS ON SCREEN INTO THREE.JS COORDS
//     var mouse = new THREE.Vector2();
//     mouse.x = (clientX / window.innerWidth) * 2 - 1;
//     mouse.y = -(clientY / window.innerHeight) * 2 + 1;

//     var raycaster = new THREE.Raycaster();
//     //USE RAYCASTER
//     raycaster.setFromCamera(mouse, this.prop.camera);

//     var intersects = raycaster.intersectObjects(clickObjects);
//     if(intersects != null && intersects.length > 0) {
//       return;
//     }
//     var boundingRect = container.getBoundingClientRect();
//       var viewPoint = {x: parseInt(clientX - boundingRect.left),y: parseInt(clientY - boundingRect.top)};

//       var p = transform.viewerCoordsToVector3(viewPoint,this.prop.scene,this.prop.renderer,this.prop.camera);
//       var sphericalCoords = transform.vector3ToSphericalCoords(p);

//       var marking = {"id":0,"barName":"point","color":"black","value":20.51,"pos":{},"time":0,"finish":false,"event":{showTime:0,hideTime:0,toTime:0}};
//       marking.pos = sphericalCoords;
//       marking.id = hotspot.getNewId();
//       this.markingPos.marking.push(marking);

//       this.addMarker(marking);
//       console.log(sphericalCoords);
        
//   }

//   function moveMarkerTo(e) {
//     if(markingPos.selectedIndex < 0) return;

//     var clientX,clientY;
    
//     var pointPos = transform.vrModeClientCoords(e,this.prop.isStereoEnable)
//     clientX = pointPos.clientX;
//     clientY = pointPos.clientY;

//     //TRANSFORM THESE COORDS ON SCREEN INTO THREE.JS COORDS
//     var mouse = new THREE.Vector2();
//     mouse.x = (clientX / window.innerWidth) * 2 - 1;
//     mouse.y = -(clientY / window.innerHeight) * 2 + 1;

//     var boundingRect = container.getBoundingClientRect();
//     var viewPoint = {x: parseInt(clientX - boundingRect.left),y: parseInt(clientY - boundingRect.top)};

//     var p = transform.viewerCoordsToVector3(viewPoint,this.prop.scene,this.prop.renderer,this.prop.camera);
//     var sphericalCoords = transform.vector3ToSphericalCoords(p);

//     updateMarker(sphericalCoords);
//     hotspot.setHotspotPosition(this.markingPos.marking[this.markingPos.selectedIndex].pos.longitude, 
//                        this.markingPos.marking[this.markingPos.selectedIndex].pos.latitude);
//   }